<template>
  <div>
    <div class="mindMapContainer" ref="mindMapContainerRef"></div>
  </div>
</template>

<script setup>
import MindMap from 'simple-mind-map';
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js';
import Watermark from 'simple-mind-map/src/plugins/Watermark.js';
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js';
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js';
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js';
import Export from 'simple-mind-map/src/plugins/Export.js';
import Drag from 'simple-mind-map/src/plugins/Drag.js';
import Select from 'simple-mind-map/src/plugins/Select.js';
import RichText from 'simple-mind-map/src/plugins/RichText.js';
import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js';
import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js';
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js';
import SearchPlugin from 'simple-mind-map/src/plugins/Search.js';
import Painter from 'simple-mind-map/src/plugins/Painter.js';
import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js';
import Formula from 'simple-mind-map/src/plugins/Formula.js';
import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js';
import { propTypes } from '@/utils/propTypes';

// 参考网站：https://blog.csdn.net/qq_31676725/article/details/141498637
// 注册插件
MindMap.usePlugin(MiniMap)
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
  .usePlugin(ExportPDF)
  .usePlugin(ExportXMind)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)
  .usePlugin(NodeImgAdjust)
  .usePlugin(TouchEvent)
  .usePlugin(SearchPlugin)
  .usePlugin(Painter)
  .usePlugin(Formula);

const mindMapContainerRef = ref();
let mindMap = null;

const props = defineProps({
  // 是否显示右键菜单
  showContextMenu: propTypes.bool.def(false),
  mindData: {
    type: [Object, Array],
    default: () => []
  },
  showMindMap: propTypes.bool.def(false)
});

async function init(data) {
  mindMap = new MindMap({
    el: mindMapContainerRef.value,
    data: data,
    editable: false, // 开启编辑模式
    initRootNodePosition: ['10%', 'center'], //初始根节点的位置
    readonly: true // 只读模式
  });
}

const destroyMindMap = () => {
  if (mindMap) {
    // 假设 simple-mind-map 有销毁方法，这里简单模拟
    mindMap.destroy();
  }
};

const updateMindMap = (data) => {
  init(data);
};

// 暴露方法给父组件
defineExpose({
  destroyMindMap,
  updateMindMap
});

onMounted(async () => {
  setTimeout(async () => {
    if (props.showMindMap && props.mindData) {
      await init(props.mindData);
    }
  }, 500);
});
</script>
<style lang="scss" scoped>
.mindMapContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100vh - 190px);
}
.top-menu-fixed {
  position: fixed;
  top: 100px;
  left: 50%;
  width: 180px;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-right: 20px;
  .top-menu-item {
    width: 50px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    padding: 3px 0px;
    border-radius: 5px;
    .top-menu-item--text {
      font-size: 14px;
    }
  }
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px;
  border-radius: 4px;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}
</style>
